<template>
  <div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" />
      </div>
    </van-overlay>
    <header>
      <div>
        <!-- 搜索框 -->
        <van-search
          v-model="value"
          shape="round"
          background="#f6bdaf"
          placeholder="请输入搜索关键词"
        />
        <!-- 头部信息标 -->
        <van-icon name="chat-o" badge="99+" />
      </div>
    </header>
    <section>
      <!-- 轮播 -->
      <van-swipe :autoplay="3000" v-if="homeData">
        <van-swipe-item
          v-for="(item, index) in homeData[0].data.images"
          :key="index"
        >
          <img v-lazy="item.img_url" />
        </van-swipe-item>
      </van-swipe>

      <!-- 菜单 -->
      <main v-if="homeData">
        <div
          class="swiper-slide"
          v-for="(item, index) in homeData[1].data.menus"
          :key="index"
        >
          <router-link :to="`/orderTopic/${index}`">
            <img :src="item.img_url" alt />
          </router-link>
        </div>
      </main>
      <!-- 养宠风尚 拒绝平庸 -->
      <div class="fashion" v-if="homeData">
        <p>{{ homeData[2].data.title }}</p>
        <van-swipe-cell
          v-for="(item, index) in homeData[2].data.list"
          :key="index"
        >
          <router-link :to="`/detail/${item.target.param}`">
            <van-card
              :price="item.sale_price"
              :title="item.title"
              :thumb="item.goods_img"
              :desc="item.be_interested"
            />
          </router-link>
        </van-swipe-cell>
      </div>

      <!-- 心选特惠 -->
      <div class="prefer" v-if="homeData">
        <div class="perfer_title">
          <span>{{ homeData[3].data.title }}</span>
          <span>{{ homeData[3].data.subtitle }}</span>
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item
            v-for="(item, index) in homeData[3].data.list"
            :key="index"
          >
            <router-link :to="`/detail/${item.target.param}`">
              <van-image :src="item.goods_img" />
              <div class="title">
                <span>{{ item.title }}</span>
              </div>
              <div class="price">
                <span>￥{{ item.market_price }}</span>
                <span>￥{{ item.sale_price }}</span>
              </div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 每日疯抢，邀请砍价 -->
      <!-- <div class="everyday">
        <div class="title">每日疯抢</div>
      <div class="berserk">

      </div>
      <div class="shareBargain"></div>
      </div> -->
      <!-- 商品推荐展示模块 -->
      <div class="good_show" v-if="homeData">
        <span>{{ homeData[5].data.header.title }}</span>
        <div class="itemBox">
          <GoodItem
            v-for="(item, index) in homeData[5].data.list"
            :key="index"
            :gdata="item"
            class="goodItems"
          />
          <van-loading type="spinner" v-if="scrolled ? 'true' : 'false'" />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
import { getPetList, getMoreGood } from "../api/index.js";
import GoodItem from "../components/GoodItem.vue";
//引入主页所有数据，不需要发起请求，以后数据不会发生改变
let homeData = require("../store/home.js");
export default {
  data() {
    return {
      homeData,
      show: true,
      images: [],
      value: "宠物", //搜索框双向绑定value值
      scrolled: true,
      leaf: 2,
      goodsYlove: [],
    };
  },
  components: {
    GoodItem,
  },
  created() {
    if (homeData) {
      this.show = false;
    }
    getPetList().then((res) => {
      //请求数据接口
    });
    getMoreGood(this.leaf).then((res) => {
      let lists = res.data.datas.list[0].data.list;
      for (let i = 0; i < lists.length; i++) {
        this.homeData[5].data.list.push(lists[i]);
      }
      if (this.leaf <= 5) {
        this.leaf++;
      }
    });
  },
  methods: {},
};
</script>
<style src="../assets/css/home.css">
</style>
<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>

